<template>
  <!-- 编写组件的结构 html 文件 -->
  <div class="demo">
    <h2>学校名称: {{ schoolName }}</h2>
    <h2>学校地址: {{ address }}</h2>
    <button @click="showName">点我提示学校名称</button>
  </div>
</template>

<script>
  // 编写组件交互相关代码 js 文件（数据、方法等）
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'School',
    data() {
      return {
        schoolName: 'B站大学',
        address: '广东深圳'
      }
    },
    methods: {
      showName() {
        alert(this.schoolName)
      }
    }
  }
</script>

<style>
  /* 编写组件的样式 css 文件 */
  .demo {
    background-color: pink;
  }
</style>